<script setup lang="ts">
	import { ref, onMounted } from "vue";
	import { formRules } from "./utils/rule";
	import { FormProps } from "./utils/types";
	import ReCol from "@/components/ReCol";
	import {
	  getWarehouseOptionsApi
	} from "@/api/warehouse";
	import { message } from "@/utils/message";
	const props = withDefaults(defineProps<FormProps>(), {
		formInline: () => ({
			title: "",
			status: 0,
			Id: 0,
		})
	});
	const ruleFormRef = ref();
	const newFormInline = ref(props.formInline);

	function getRef() {
		return ruleFormRef.value;
	}
	defineExpose({ getRef });
	const warehouseOptions = ref();
	const deviceTypeOptions = ref([
		{
			id: 1,
			name: '提升机'
		},
		{
			id: 2,
			name: '托盘'
		}
	])
	const statusOptions = ref([
		{
			id: 1,
			name: '启用'
		},
		{
			id: 2,
			name: '禁用'
		}
	])
	async function getWarehouseOptions() {
		const res = await getWarehouseOptionsApi();
		if(res.code !== 200) {
			message(res.msg ?? "操作失败,请联系管理员", {
			  type: "error"
			});
			return
		}
		warehouseOptions.value = res.result
	}
	onMounted(async () => {
	  getWarehouseOptions();
		
	});
</script>

<template>
	<el-form ref="ruleFormRef" :model="newFormInline" :rules="formRules" label-width="auto">
		<el-row :gutter="30">
			<re-col :value="12" :xs="24" :sm="24" v-if="newFormInline.module === 'plc'">				<el-form-item label="仓库" prop="warehouseId">
					<el-select
					    v-model="newFormInline.warehouseId"
					    placeholder="请选择仓库"
					  >
					    <el-option
					      v-for="item in warehouseOptions"
					      :key="item.warehouseId"
					      :label="item.name"
					      :value="item.warehouseId"
					    />
					</el-select>				</el-form-item>			</re-col>
			<re-col :value="12" :xs="24" :sm="24">
				<el-form-item label="设备类型" prop="deviceType">
					<el-select
					    v-model="newFormInline.deviceType"
					    placeholder="请选择设备类型"
					  >
					    <el-option
					      v-for="item in deviceTypeOptions"
					      :key="item.id"
					      :label="item.name"
					      :value="item.id"
					    />
					</el-select>
				</el-form-item>
			</re-col>
			<re-col :value="12" :xs="24" :sm="24">
				<el-form-item label="设备名称" prop="deviceName">
					<el-input v-model="newFormInline.deviceName" clearable placeholder="请输入设备名称" />
				</el-form-item>
			</re-col>			<re-col :value="12" :xs="24" :sm="24" v-if="newFormInline.module === 'plc'">				<el-form-item label="设备别名" prop="deviceAlias">					<el-input v-model="newFormInline.deviceAlias" clearable placeholder="请输入设备别名" />				</el-form-item>			</re-col>
			<re-col :value="12" :xs="24" :sm="24" v-if="newFormInline.module === 'outside'">
				<el-form-item label="设备编号" prop="deviceNo">
					<el-input v-model="newFormInline.deviceNo" clearable placeholder="请输入设备编号" />
				</el-form-item>
			</re-col>			<re-col :value="12" :xs="24" :sm="24">				<el-form-item label="IP" prop="ipAddress">					<el-input v-model="newFormInline.ipAddress" clearable placeholder="请输入IP" />				</el-form-item>			</re-col>			<re-col :value="12" :xs="24" :sm="24">
				<el-form-item label="端口号" prop="portNumber">
					<el-input v-model="newFormInline.portNumber" clearable placeholder="请输入端口号" type="number" class="no_number"/>
				</el-form-item>
			</re-col>
			<re-col :value="12" :xs="24" :sm="24" v-if="newFormInline.module !== 'network'">
				<el-form-item label="设备状态" prop="status">
					<el-select
					    v-model="newFormInline.status"
					    placeholder="请选择设备状态"
					  >
					    <el-option
					      v-for="item in statusOptions"
					      :key="item.id"
					      :label="item.name"
					      :value="item.id"
					    />
					</el-select>
				</el-form-item>
			</re-col>
			<re-col :value="12" :xs="24" :sm="24" v-if="newFormInline.module === 'outside'">
				<el-form-item label="设备位置" prop="devicePos">
					<el-input v-model="newFormInline.devicePos" clearable placeholder="请输入设备位置" />
				</el-form-item>
			</re-col>
		</el-row>
	</el-form>
</template>
<style scoped>
	
	:deep.no_number input::-webkit-inner-spin-button,
	:deep.no_number input::-webkit-outer-spin-button{
	    -webkit-appearance: none !important;
	}
	:deep.no_number input[type="number"]{
	    -moz-appearance: textfield;
	}
	.avatar-uploader .el-upload {
		border: 1px dashed var(--el-border-color);
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
		transition: var(--el-transition-duration-fast);
	}

	.avatar-uploader .el-upload:hover {
		border-color: var(--el-color-primary);
	}

	.el-icon.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 178px;
		height: 178px;
		text-align: center;
	}
</style>